<template>
    <div>
        <!-- 轮播图区域 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunboList" :key="item.banana_id">
            	<img :src="item.banner_url"/>
            </mt-swipe-item>
        </mt-swipe>
        
        <!--九宫格-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                    <img src="../../images/ios_cy3x_1.png"/>
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoList">
                    <img src="../../images/ios_fz3x_1.png"/>
                    <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/ios_gx3x_1.png"/>
                    <div class="mui-media-body">商品购买</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/ios_jd3x_1.png"/>
                    <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/ios_jjjc3x_1.png"/>
                    <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/ios_mr3x_1.png"/>
                    <div class="mui-media-body">联系我们</div></a></li>
        </ul>
        
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
    data(){
    	return{
    		lunboList: [] //保存轮播图的数组
    	}
    },
    created() {
    	this.getLunbo();
    },
    methods: {
    	getLunbo() { //获取 轮播图数据的方法
    		this.$http.get('https://m.shengyimao.com/index.php?mod=product&act=bannerindex').then(res => {
    			//console.log(res.body);
    			//成功的 
    			if(res.body.respcode === '000') {
    				this.lunboList = res.body.data
    				Toast("加载成功...")
    			}else{
    				//失败了
    				Toast("加载失败...")
    			}
    			
    		});
    	}
    }
    
}
</script>

<style lang="scss" scoped>
.mint-swipe{
    height: 200px;
}
.mint-swipe-item{
    &:nth-child(1){
        background-color: #ccc;
    }
    &:nth-child(2){
        background-color: red;
    }
    &:nth-child(3){
        background-color: pink;
    }
    
    img{
    	width: 100%;
    	height: 100%
    }
    
}
.mui-grid-view.mui-grid-9{
	background: #fff;
	border: none;
	img{
		width: 63px;
		height: 63px;
	}
	.mui-table-view-cell{
		border: none;
		
		.mui-media-body{
	    	font-size: 13px;
	    }
	}
}
</style>
